<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>

    <title>jtopo</title>
    <link rel="stylesheet" href="../../static/css/common/font.css">
    <link href="../../static/css/common/slider.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" href="../../static/css/common/weadmin.css">
    <link rel="stylesheet" href="../../lib/layui/css/layui.css" type="text/css" media="all">
    <link rel="stylesheet" href="../../static/css/common/header.min.css"/>
    <script type="text/javascript" src="../../lib/jquery/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="../../lib/jtopo-tool/jtopo-0.4.8-min.js"></script>
    <script type="text/javascript" src="../../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../../lib/echarts-tool/echarts.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="../../lib/slider/slider.js"></script>

    <link rel="stylesheet" href="../../static/css/edgecompute/offload.css">


</head>
<body>
<div class="layui-row layui-col-space30">
    <!--    存放canvas中的拓扑图-->
    <div class="layui-col-md6 layui-col-lg6">
        <div id="all_topo_block" style="width: 90%; margin: 30px auto;">
            <canvas id="kk" height="550" width="560" style="border: 1px solid #e8e8e8;"></canvas>
        </div>
    </div>
    <!--    存放卸载的表格-->
    <div class="layui-col-md6 layui-col-lg6">
        <div id="all_tab" style="width: 95%;margin: 30px 0">
            <div class="layui-tab layui-tab-card">
                <ul class="layui-tab-title">
                    <li class="layui-this">终端节点列表</li>
                    <li>MEC节点列表</li>
                    <li>任务卸载</li>

                </ul>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <div style="width: 90%;margin: 0 auto">
                            <div style="width: 100%;padding: 0;">
                                <!--<fieldset class="layui-elem-field layui-field-title">
                                    <legend style="font-size: 20px">终端表格</legend>
                                </fieldset>-->
                            </div>
                            <div style="width: 100%;margin: 15px auto 0;">
                                <!--                            终端的表格-->
                                <table class="layui-hide" id="terms" lay-filter="terms"></table>
                            </div>
                        </div>


                    </div>
                    <div class="layui-tab-item">
                        <div style="width: 90%;margin: 0 auto">
                            <div style="width: 100%;padding: 0;margin: 0 auto">
                                <!--                            <fieldset class="layui-elem-field layui-field-title">-->
                                <!--                                <legend style="font-size: 20px">MEC节点表格</legend>-->
                                <!--                            </fieldset>-->
                            </div>
                            <div style="width:100%;margin: 5px auto 0">
                                <!--                            MEC节点的表格-->
                                <table class="layui-hide" id="mecs" lay-filter="mecs"></table>
                            </div>
                        </div>

                    </div>
                    <div class="layui-tab-item " style="position: relative">
                        <div style="width: 90%;margin: 0 auto">
                            <button id="resetAllOffloadTasksBtn" class="layui-btn layui-btn-normal layui-btn-sm" style="position: absolute; top: 0; right: 5%">
                                重置卸载
                            </button>
                            <span id="offload_breadcrumb" class="layui-breadcrumb" lay-separator="/">
                                <a id="not_offload_breadnav" href="javascript:"><cite
                                        style="color: firebrick;">已切割未卸载</cite></a>
                                <a id="offload_breadnav" href="javascript:">已卸载</a>
                            </span>
                            <div id="not_offload_block" style="width: 100%;margin: 10px 0;display: block;">
                                <div style="width: 100%;padding: 0;">
                                    <fieldset class="layui-elem-field layui-field-title">
                                        <legend style="font-size: 20px">未卸载任务表格</legend>
                                    </fieldset>
                                </div>
                                <div style="width: 100%;">
                                    <!--                                    <h1>这里加入未卸载的表格</h1>-->
                                    <table class="layui-hide" id="not_offload_table"
                                           lay-filter="not_offload_table"></table>
                                </div>
                                <div style="width: 100%;height: 40px;">
                                    <div style="text-align: center">
                                        <button id="offload_btn" class="layui-btn layui-btn-danger" style="width: 30%;">
                                            卸载
                                        </button>
                                    </div>

                                </div>
                                <!--                                点击卸载按钮后的拓扑图-->
                                <div id="offload_topodiagram"
                                     style="margin-top:10px;display: none;width: 100%;height: 400px;border: 2px solid #e8e8e8;">
                                    <div id="offload_topo" style="width: 800px;height: 400px;margin:0 auto;">
                                        <canvas id="offload_topo_show" height="390px" width="800px"></canvas>
                                    </div>
                                </div>
                            </div>

                            <div id="offload_block" style="width: 100%;margin: 10px 0;display: none;">
                                <div style="width: 100%;padding: 0;">
                                    <fieldset class="layui-elem-field layui-field-title">
                                        <legend style="font-size: 20px">已经卸载任务展示</legend>
                                    </fieldset>
                                </div>
                                <!--                                扇形图-->
                                <div class="layui-row" id="pie"
                                     style="width: 300px;height:200px; margin: 0 auto;"></div>
                                <div style="width: 100%">
                                    <!--                                    已经卸载的表格-->
                                    <table class="layui-hide" id="offload_table" lay-filter="offload_table"></table>
                                </div>
                                <!--                                展示性能对比的按钮-->
                                <div style="text-align: center">
                                    <button id="offload_display_histogram_btn" style="width: 30%"
                                            class="layui-btn layui-btn-warm">点击查看性能对比
                                    </button>
                                </div>
                                <!--                                性能对比图-->
                                <div id="offload_display_histogram"
                                     style="margin:10px 0 0;width: 100%;height: 450px;border: 2px solid #e8e8e8;display: none;">
                                    <div id="bar" style="height: 450px;margin: 0 auto">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>

<!--<button id="showTopoFrontBtn" style="position: fixed;top: 506px;left: 10px;font-size: 17px;z-index: 9999" class="layui-btn layui-btn-normal layui-btn-radius">-->
<!--    <i class="layui-icon layui-icon-search" style="font-size: 17px"></i>-->
<!--</button>-->
<!--<div id="all_mask" style="width:100%;height: 100%;background-color: rgba(0,0,0,0.84);z-index: 9997;display: none;position: fixed"></div>-->

<!--<div class="weadmin-nav" style="position: fixed;z-index: 9991;width: 100%;top: 0;background-color: white">-->
<!--	<span class="layui-breadcrumb">-->
<!--        <a href="">首页</a>-->
<!--        <a href="">子网</a>-->
<!--        <a><cite>任务卸载模块</cite></a>-->
<!--    </span>-->
<!--    <a class="layui-btn layui-btn-sm"-->
<!--       style="background-color: #4F94CD; line-height:1.6em;margin-top:3px;margin-right: 15px;float:right"-->
<!--       href="javascript:location.replace(location.href);" title="刷新">-->
<!--        <i class="layui-icon" style="line-height:30px">&#x1002;</i></a>-->
<!--</div>-->
<!--<div class="weadmin-body">-->
<!--    <div id="all_tab" style="width: 830px;float:right;margin-top: 40px">-->
<!--        <div class="layui-tab layui-tab-card">-->
<!--            <ul class="layui-tab-title">-->
<!--                <li class="layui-this">终端节点列表</li>-->
<!--                <li>MEC节点列表</li>-->
<!--                <li>任务卸载</li>-->

<!--            </ul>-->
<!--            <div class="layui-tab-content">-->
<!--                <div class="layui-tab-item layui-show">-->
<!--                    <div style="width: 90%;margin: 0 auto">-->
<!--                        <div style="width: 100%;padding: 0;">-->
<!--                            &lt;!&ndash;<fieldset class="layui-elem-field layui-field-title">-->
<!--                                <legend style="font-size: 20px">终端表格</legend>-->
<!--                            </fieldset>&ndash;&gt;-->
<!--                        </div>-->
<!--                        <div style="width: 100%;margin: 15px auto 0;">-->
<!--                            &lt;!&ndash;                            终端的表格&ndash;&gt;-->
<!--                            <table class="layui-hide" id="terms" lay-filter="terms"></table>-->
<!--                        </div>-->
<!--                    </div>-->


<!--                </div>-->
<!--                <div class="layui-tab-item">-->
<!--                    <div style="width: 90%;margin: 0 auto">-->
<!--                        <div style="width: 100%;padding: 0;margin: 0 auto">-->
<!--                            &lt;!&ndash;                            <fieldset class="layui-elem-field layui-field-title">&ndash;&gt;-->
<!--                            &lt;!&ndash;                                <legend style="font-size: 20px">MEC节点表格</legend>&ndash;&gt;-->
<!--                            &lt;!&ndash;                            </fieldset>&ndash;&gt;-->
<!--                        </div>-->
<!--                        <div style="width:100%;margin: 5px auto 0">-->
<!--                            &lt;!&ndash;                            MEC节点的表格&ndash;&gt;-->
<!--                            <table class="layui-hide" id="mecs" lay-filter="mecs"></table>-->
<!--                        </div>-->
<!--                    </div>-->

<!--                </div>-->
<!--                <div class="layui-tab-item ">-->
<!--                    <div style="width: 90%;margin: 0 auto">-->
<!--                            <span id="offload_breadcrumb" class="layui-breadcrumb" lay-separator="/">-->
<!--                                <a id="not_offload_breadnav" href="javascript:"><cite-->
<!--                                        style="color: firebrick;">已切割未卸载</cite></a>-->
<!--                                <a id="offload_breadnav" href="javascript:">已卸载</a>-->
<!--                            </span>-->
<!--                        <div id="not_offload_block" style="width: 100%;margin: 10px 0;display: block;">-->
<!--                            <div style="width: 100%;padding: 0;">-->
<!--                                <fieldset class="layui-elem-field layui-field-title">-->
<!--                                    <legend style="font-size: 20px">未卸载任务表格</legend>-->
<!--                                </fieldset>-->
<!--                            </div>-->
<!--                            <div style="width: 100%;">-->
<!--                                &lt;!&ndash;                                    <h1>这里加入未卸载的表格</h1>&ndash;&gt;-->
<!--                                <table class="layui-hide" id="not_offload_table" lay-filter="not_offload_table"></table>-->
<!--                            </div>-->
<!--                            <div style="width: 100%;height: 40px;">-->
<!--                                <div style="text-align: center">-->
<!--                                    <button id="offload_btn" class="layui-btn layui-btn-danger" style="width: 30%;">卸载-->
<!--                                    </button>-->
<!--                                </div>-->

<!--                            </div>-->
<!--                            &lt;!&ndash;                                点击卸载按钮后的拓扑图&ndash;&gt;-->
<!--                            <div id="offload_topodiagram"-->
<!--                                 style="margin-top:10px;display: none;width: 100%;height: 400px;border: 2px solid #e8e8e8;">-->
<!--                                <div id="offload_topo" style="width: 800px;height: 400px;margin:0 auto;">-->
<!--                                    <canvas id="offload_topo_show" height="390px" width="800px"></canvas>-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->

<!--                        <div id="offload_block" style="width: 100%;margin: 10px 0;display: none;">-->
<!--                            <div style="width: 100%;padding: 0;">-->
<!--                                <fieldset class="layui-elem-field layui-field-title">-->
<!--                                    <legend style="font-size: 20px">已经卸载任务展示</legend>-->
<!--                                </fieldset>-->
<!--                            </div>-->
<!--                            &lt;!&ndash;                                扇形图&ndash;&gt;-->
<!--                            <div class="layui-row" id="pie" style="width: 300px;height:200px; margin: 0 auto;"></div>-->
<!--                            <div style="width: 100%">-->
<!--                                &lt;!&ndash;                                    已经卸载的表格&ndash;&gt;-->
<!--                                <table class="layui-hide" id="offload_table" lay-filter="offload_table"></table>-->
<!--                            </div>-->
<!--                            &lt;!&ndash;                                展示性能对比的按钮&ndash;&gt;-->
<!--                            <div style="text-align: center">-->
<!--                                <button id="offload_display_histogram_btn" style="width: 30%"-->
<!--                                        class="layui-btn layui-btn-warm">点击查看性能对比-->
<!--                                </button>-->
<!--                            </div>-->
<!--                            &lt;!&ndash;                                性能对比图&ndash;&gt;-->
<!--                            <div id="offload_display_histogram"-->
<!--                                 style="margin:10px 0 0;width: 100%;height: 450px;border: 2px solid #e8e8e8;display: none;">-->
<!--                                <div id="bar" style="height: 450px;margin: 0 auto">-->
<!--                                </div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </div>-->

<!--            </div>-->

<!--        </div>-->
<!--    </div>-->
<!--</div>-->

<!--表头工具栏-->
<script type="text/html" id="all_terminal_head_bar">
    <button id="multi_terminal_task_btn" class="layui-btn layui-btn-sm" lay-event="terminalMultiCheck"
            data-method="term_multi_check">展示所选终端全部任务
    </button>
</script>
<script type="text/html" id="multi_terminal_subtask_bar">
    <button id="multi_terminal_subtask_btn" class="layui-btn layui-btn-sm" lay-event="subTaskMultiCut"
            data-method="subtask_multi_cut">切分所选的父任务
    </button>
</script>

<!--工具栏监听图标-->
<script type="text/html" id="all_mec_bar">
    <i id="show_mec_icon" class="layui-icon layui-icon-table" style="font-size: 20px" lay-event="showMecTaskList"
       title="展示列表"></i>
</script>
<script type="text/html" id="all_terminal_bar">
    <i id="show_terminal_icon" class="layui-icon layui-icon-table" style="font-size: 20px" lay-event="showTermTaskList"
       title="展示列表"></i>
</script>
<script type="text/html" id="one_terminal_bar">
    <i id="cut_util" class="layui-icon layui-icon-util" style="font-size: 20px" lay-event="sub" title="切割"></i>
</script>

<!--主页面topo图部分-->
<script src="../../static/js/edgecompute/offload/index.js"></script>

<!--MEC选项卡-->
<script src="../../static/js/edgecompute/offload/MECTab.js"></script>

<!--终端选项卡-->
<script src="../../static/js/edgecompute/offload/terminalTab.js"></script>

<!--卸载选项卡-->
<script src="../../static/js/edgecompute/offload/offloadTab.js"></script>

<script>
    //监听工具
    layui.use(['table', 'form', 'layer', 'jquery'], function () {
        var table = layui.table, form = layui.form;
        table.on('tool(terms)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'terminalMultiCheck':
                    console.log('你好呀小垃圾');
                    break;
            }
        });

        //监听展示列表
        table.on('tool(terms)', function (obj) {
            var data = obj.data; //获取表格一行的数据
            if (obj.event === 'showTermTaskList') {
                terminalLayer(data.termId);
            }
        });
    });
</script>
</body>
</html>